<template>
  <div class="tabs-wrap">
    <div class="tabs-title" @click="changeTabs">
      <span class="tabs-btn" :class="!loginForm.slectedMethod?'tabs-btn-checked':''">短信验证码登录</span>
      <span class="tabs-btn" :class="loginForm.slectedMethod?'tabs-btn-checked':''">账号登录</span>
    </div>
    <div class="first-tabs" v-if="!loginForm.slectedMethod">
      <van-cell-group class="tabs-fields">
        <van-field
            class="tabs-field"
            v-model="loginForm.phone"
            clearable
            @blur="checkPhone"
            label="手机号"
            placeholder="请输入手机号"
        />
        <van-field
            class="tabs-field"
            v-model="loginForm.validcode"
            clearable
            label="验证码"
            @blur="uploadInfo"
            placeholder="请输入验证码"
        >
          <van-button slot="button" size="small" type="primary">获取验证码</van-button>
        </van-field>

      </van-cell-group>
    </div>
    <div class="second-tabs" v-if="loginForm.slectedMethod">
      <van-cell-group class="tabs-fields">
        <van-field
            class="tabs-field"
            v-model="loginForm.username"
            clearable
            label="账号"
            placeholder="手机号/邮箱/用户名"
            :error-message="loginForm.username?'':手机号格式错误"
        />
        <van-field
            class="tabs-field"
            v-model="loginForm.password"
            type="password"
            label="密码"
            placeholder="请输入密码"
        />
      </van-cell-group>
    </div>

  </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop } from "vue-property-decorator"
  import { Getter, Action } from 'vuex-class'
  import {LoginForm, TabsData} from "@/components/tabs.interface";
  import {Toast} from 'vant';
  // import {  } from "@/components" // 组件

  @Component({})
  export default class Tabs extends Vue {
    // prop
    @Prop({
      required: false,
      default: ''
    }) name!: string

    // data
    data: TabsData = {
      componentName: 'tabs'
    }
    loginForm: LoginForm={
      username: '',
      password: '',
      phone: '',
      validcode: '',
      slectedMethod: false
    }

    checkPhone(){
      let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;  //1开头，第二位是3/4/5/7/8中的一位，剩下的9位随机组合结尾
      if(!phoneReg.test(this.loginForm.phone)){
        Toast('手机号格式错误');
        return;
      }else{
        this.$emit('uploadInfo',this.loginForm)
      }
    }
    uploadInfo(){
      this.$emit('uploadInfo',this.loginForm)
    }
    changeTabs(){
      this.loginForm.slectedMethod = !this.loginForm.slectedMethod;
      if(this.loginForm.slectedMethod){
        this.loginForm.phone = '';
        this.loginForm.validcode = '';
      }else{
        this.loginForm.username = '';
        this.loginForm.password = '';
      }
      this.$emit('uploadInfo',this.loginForm)
    }
    created() {
      //
    }

    activated() {
      //
    }

    mounted() {
      //
    }

  }
</script>

<style lang="scss">
  @import "@/assets/scss/variables";

  .tabs-wrap {
    width: 100%;

  }
  .tabs-title{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    line-height: 60px;
    font-size: 1.2rem;
    background-color: #25a4bb;
  }
  .tabs-btn{
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 3px;
    width: calc(50% - 1rem);
    text-align: center;
    color: #fff;
    height: 40px;
    line-height: 40px;
  }
  .first-tabs{

    background-color: #ffffff;
  }
  .tabs-btn-checked{
    background-color: #ffffff;
    color: #25a4bb;
  }
  .tabs-fields{
    margin-top: 1rem;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .login-btn{
    height: 3rem;
    line-height: 3rem;
    font-size: 1.4rem;
    margin: 1rem .5rem;
    border-radius: 5px;
    color: #ffffff;
    text-align: center;
    background-color: #25a4bb;
  }
  .return-password{
    text-align: right;
    height: 1rem;
    font-size: .85rem;
    line-height: 1rem;
    color: #18a9b9;
    padding-right: 1rem;
  }
  .login-xieyi{
    color: #ccc;
    font-size: .85rem;
  }
  .van-button--primary{
    border: 1px solid #ccc;
    background-color: #ffffff;
    color: #ccc;
  }
</style>

